html {
    aspect-ratio: 9 / 16;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    overflow-x: hidden;
}

.fullscreen-image {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: auto ;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 9 / 18;
}

.center-overlay {
    position: absolute; /* or fixed, depending on your needs */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensures it's above other content */
    animation: fadeIn 1.5s;
}

.center-overlay2 {
    position: absolute; /* or fixed, depending on your needs */
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensures it's above other content */
    animation: fadeIn 3s;
}

#toggle-icon:hover {
    content: url('../images/flash-off.png');;
}

.header {
    background-color: #ff3737e1;
    color: white;
    padding: 8%;
    text-align: center;
    position: relative;
}

.header2 {
    background-color: #ff53a0;
    color: white;
    padding-left: 6%;
    padding-right: 6%;
    Padding-bottom: 5%;
    padding-top: 4%;
    text-align: left;
    position: relative;
}

.header3 {
    background-color: #ff6b6b;
    color: white;
    padding-left: 6%;
    padding-right: 6%;
    Padding-bottom: 5%;
    padding-top: 4%;
    text-align: left;
    position: relative;
}

.header4 {
    background-color: #ff3737e1;
    color: white;
    padding-left: 6%;
    padding-right: 6%;
    Padding-bottom: 5%;
    padding-top: 4%;
    text-align: left;
    position: relative;
}

.header5 {
    background-color: #f7cc32e1;
    color: white;
    padding-left: 6%;
    padding-right: 6%;
    Padding-bottom: 5%;
    padding-top: 4%;
    text-align: left;
    position: relative;
}

.header2 .back-button, .header3 .back-button, .header4 .back-button, .header5 .back-button {
    width: 100%;
    height: auto;
    top: 95px;
    position: relative;
}

.header2 h1, .header3 h1, .header4 h1, .header5 h1 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 550;
    text-align: right;
    padding-top: 5%;
    margin: 0%;
}

.header .icons,.header2 .icons, .header3 .icons, .header4 .icons, .header5 .icons {
    position: absolute;
    top: 15px;
    left: 3%;
    width: 94%;
}

.floating-button {
    position: fixed;
    bottom: 13%;
    right: 10%;
    z-index: 10;
    max-width: calc(100% - 20%); 
    max-height: calc(100% - 26%); 
    animation: fadeIn 2s;
}

.floating-button2 {
    position: fixed;
    bottom: 13.2%;
    right: 10%;
    z-index: 9;
    max-width: calc(100% - 20%); 
    max-height: calc(100% - 26%); 
    animation: fadeIn 8s;
}

.circle-button {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #f9f9f9;
    color: rgb(239, 52, 52);
    font-size: 110px;
    font-weight: 700;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid #5d5d5d7b;
    cursor: pointer;
    transition: all 0.3s ease;
}
.circle-button.expanded {
    width: 175px;
    height: 175px;
  }

  .darken-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    transition: opacity 0.5s ease;
    opacity: 0;
    display: none;
}
.darken-background.visible {
    opacity: 1;
    display: block; 
}

.circle-button2 {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background-color: #f9f9f9;
    color: rgb(239, 52, 52);
    font-size: 70px;
    font-weight: 700;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid #5d5d5d7b;
    cursor: pointer;
}

.circle-button2 p {
    font-size: 30px;
    color: rgba(239, 52, 52, 0.75);
    margin: 0;
    padding: 0;
}

.circle-button3 {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background-color: #f9f9f9;
    color: rgb(239, 52, 52);
    font-size: 70px;
    font-weight: 700;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid #5d5d5d7b;
    cursor: pointer;
}

.circle-button3 p {
    font-size: 30px;
    color: rgba(239, 52, 52, 0.75);
    margin: 0;
    padding: 0;
}

.circle-button4 {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background-color: #f9f9f9;
    color: rgb(239, 52, 52);
    font-size: 70px;
    font-weight: 700;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid #5d5d5d7b;
    cursor: pointer;
}

.circle-button4 p {
    font-size: 30px;
    color: rgba(239, 52, 52, 0.75);
    margin: 0;
    padding: 0;
}

.circle-button5 {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background-color: #f9f9f9;
    color: rgb(239, 52, 52);
    font-size: 70px;
    font-weight: 700;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid #5d5d5d7b;
    cursor: pointer;
}

.circle-button5 p {
    font-size: 30px;
    color: rgba(239, 52, 52, 0.75);
    margin: 0;
    padding: 0;
}

.confirmed {
    background-color: #ffffffc6;
    border-radius: 15px;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    text-align: left;
    position: fixed;
    display: none;
    left: 9%;
    top: 27%;
    transition: opacity 1s ease-out, visibility 1s ease;
    opacity: 1;
}

.confirmed1 {
    background-color: #ffffffc6;
    border-radius: 15px;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    text-align: left;
    position: fixed;
    display: none;
    left: 29%;
    top: 11%;
    transition: opacity 1s ease-out, visibility 1s ease;
    opacity: 1;
}

.confirmed p, .confirmed1 p{
    font-size: 45px;
    font-weight: 550;
    margin-top: 20px;
    margin-bottom: 20px;
}

.popup-container, .popup-custom, .popup-container1, .popup-loading {
    position: fixed;
    top: -30%;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 10;
    transition: opacity 1s ease, visibility 1s ease;
    opacity: 0;
    visibility: hidden;
}

.popup-filter {
    position: fixed;
    top: -15%;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 10;
    transition: opacity 1s ease, visibility 1s ease;
    opacity: 0;
    visibility: hidden;
}

.popup-custom.visible, .popup-container.visible, .popup-container1.visible, .popup-loading.visible, .popup-filter.visible {
    display: flex; 
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.popup-box {
    background-color: white;
    border-radius: 30px;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    text-align: left;
    width: 65%;
    max-width: 800px;
    height: 20%;
    max-height: 300px;
    z-index: 10;
}

.popup-box1 {
    background-color: white;
    border-radius: 30px;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 65%;
    max-width: 800px;
    height: 20%;
    max-height: 300px;
    z-index: 10;
    float: right;
}

.popup-box2 {
    background-color: white;
    border-radius: 30px;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 65%;
    max-width: 800px;
    height: 30%;
    max-height: 450px;
    z-index: 10;
    float: right;
}

.popup-box p {
    font-size: 45px;
    font-weight: 550;
    margin-bottom: 15px;
    margin-left: 15px;
}
.popup-box1 p {
    font-size: 45px;
    font-weight: 550;
    margin-bottom: 0px;
    margin-left: 15px;
    padding-bottom: 0px;
}

.popup-box input {
    width: 94.5%;
    padding: 10px;
    margin-bottom: 20px;
    margin-left: 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 36px;
}

.popup-buttons {
    display: flex;
    justify-content: flex-end; 
    gap: 15px; 
    padding-top: 25px;
}

.cancel-button, .confirm-button, .cancel-button2, .confirm-button2 {
    flex: 0 1 25%;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 15px ;
    font-size: 36px;
    border: none;
    border-radius: 12px;
    margin: 0 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 11;
}

.cancel-button {
    background-color: #ccc;
}

.confirm-button {
    background-color: #f7d046;
}

.cancel-button1, .confirm-button1 {
    flex: 0 1 25%;
    padding: 10px;
    padding-top: 15px;
    padding-bottom:15px ;
    font-size: 36px;
    border: none;
    border-radius: 12px;
    margin: -20px 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 11;
}

.cancel-button1, .cancel-button2 {
    background-color: #ccc;
}

.confirm-button1, .confirm-button2 {
    background-color: #f7d046;
}

.icons img {
    width: 100%;
}

.scanner {
    top: 60%;
    position: absolute;
    width: auto;
    background-color: white;
    margin: 15px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.14);
    display: block;
}

.location {
    top: 60%;
    position: absolute;
    left: 27%;
    background-color: white;
    margin: 15px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
}

.scanner img {
    margin: 3px auto;
    padding: 10px;
    width: 100%;
    max-width: 90px;
    height: auto;
    object-fit: contain;
    align-items: center;
    display: block;
}

.location img {  
    height: auto;
    object-fit: contain;
    display: block;
}

.location .location-icon {
    margin-right: 10px;
    width: 116px; 
}

.location .location-text {
    margin: 0;
    text-align: left;
    color: #ff6b6b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 55px;
}

.location .auto-location {
    margin-left: auto;
    border-left: 2px solid #ff6b6b;
    padding-left: 20px;
    padding-right: 10px;
    width: 99px;
}

.active-tickets {
    background-color: #fbfbfb;
    margin: 15px;
    padding: 8%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-image: url('../images/background-ssp.png');
    background-size: 64%;
    background-position: right top;
    background-repeat: no-repeat;
    padding-top: 10%;
    padding-bottom: 8%;
}

.active-tickets img {
    float: right ;
    margin-right: 10px;
    width: 38%;
    height:auto;
}
.vehicle {
    background-color: rgb(255, 216, 60);
    margin: 15px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.14);
    display: block;
    width: 180px;
    height: auto;
    align-items: center;
    font-size: 30px;
    text-align: center;
    margin: 0;
    color: #000000;
}

.Vehicle1 {
    background-color: rgb(233, 233, 233);
    margin: 15px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.14);
    display: block;
    width: 180px;
    height: auto;
    align-items: center;
    font-size: 30px;
    text-align: center;
    margin: 0;
    color: #000000;
}

.filler-line {
    width: 48%;
    border: none; 
    border-top: 4px solid rgba(218, 41, 41, 0.451); 
    display: inline-block;
    margin-left: 8%;
}

.active-tickets p{
    display: inline-block;
    color: #000000;
    font-size: 50px;
    font-weight: 550;
}

.active-tickets span{
    display: inline-block;
    color: #000000;
    font-size: 50px;
}

.timer {
    display: inline-block;
    color: #000000;
    font-size: 80px;
    font-weight: 500;
    margin-top: 10px;
}

.credit-receipt-box {
    background-color: white;
    display: flex;
    margin:0;
    padding: 0;
}

.credit, .receipt {
    flex: 1;
    padding-left: 3%;
    margin: 5%;
    width: 40%;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.14);
}

.credit a, .receipt a {
    text-decoration:none;
    color: #111111;
}

.credit p, .receipt p{
    padding-top: 0;
    font-size: 50px;
    font-weight: 550;
    letter-spacing: 1px;
}

.credit span {
    font-size: 60px;
    font-family:Verdana, Geneva, Tahoma, sans-serif ;
    letter-spacing: 3px;
}

.credit {
    background-color: #febbd9;
    margin-left: 8%;
    background-image: url('../images/Credit-background.png');
    background-size: 44%;
    background-position: right bottom;
    background-repeat: no-repeat;
    animation: slide-to-right 300ms ease-in;
}

.credit1 {
    flex: 1;
    padding-left: 3%;
    width: 87%;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.14);
    background-color: #febbd9;
    background-image: url('../images/credit-page-icon.png');
    background-size: 17%;
    background-position: right;
    background-repeat: no-repeat;
    background-position-x: 95%;
    position: relative;
    margin: 5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    animation: slide-to-right 300ms ease-in;
}

.receipt1 {
    flex: 1;
    padding-left: 3%;
    width: 87%;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.14);
    background-color: #ffc6bd;
    background-image: url('../images/receipt-background-filter.png');
    background-size: 15%;
    background-position: right;
    background-repeat: no-repeat;
    background-position-x: 100%;
    position: relative;
    margin: 5%;
    padding-top: 0.5%;
    padding-bottom: 6.5%;
    padding-right: 0%;
    animation: slide-to-right 300ms ease-in;
}

.credit1 p, .receipt1 p{
    padding-top: 0;
    font-size: 50px;
    font-weight: 550;
    letter-spacing: 1px;
}

.main-credit {
    background-color: rgb(245, 245, 245);
    display: flex;
    margin: 5%;
    padding: 2%;
    border-radius: 20px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.15);
    position: relative;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 1.5s;
}

.main-credit-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0px;
    margin-top: 0px;
    width: 100%;
}

.main-credit-buttons {
    flex: 0 1 22%;
    margin: 20px;
    margin-bottom: 20px;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 3% ;
    padding-right: 3% ;
    width: 20%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    background-color: #e9e9e9;
    font-size: 40px;
    font-weight: 550;
    text-align: center;
    float: left;
}

.main-credit-buttons:nth-child(n+6){
    flex: 0 1 55%;
}

.custom-credit-box {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.Custom-credit {
    flex: 0 1 100%;
    background-color: #ebebeb;
    border-radius: 10px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);
    padding: 20px;
    width: 100%;
    text-align: left;
    margin: 25px;
    margin-bottom: 0px;
}

.input-amount {
    width: calc(100% - 20px); 
    padding: 10px;
    margin-bottom: 10px;
    font-size: 55px;
    background-color: #ebebeb;
    border: none; 
    border-bottom: #848484 solid 2px;
    outline: none;  
}

.input-amount::placeholder {
    color: #b6b6b6; 
}

.min-reload {
    margin: 0 0 15px;
    color: #777777;
    font-size: 38px;
    padding-left: 10px;
}

.receipt {
    background-color: #ffc6bd;
    margin-right: 8%;
    background-image: url('../images/receipt-background.png');
    background-size: 42%;
    background-position: right bottom;
    background-repeat: no-repeat;
    animation: slide-to-left 600ms ease-in;
}

.options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* Space between the buttons */
    justify-content: center;
    margin: 20px;
    margin-top: 50px;
    margin-bottom: 30px;
}

.option {
    flex: 1 1 calc(50% - 30px); 
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #adadad;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    color: #adadad;
    font-size: 36px;
}

.option.active {
    border-color: black;
    color: black;
}

.additional-services {
    background-color: white;
    margin: 15px;
    padding-left: 3%;
    padding-right: 3%;
    border-radius: 10px;
    justify-content: space-between;
}

.additional-services p{
    display: inline-block;
    color: #000000;
    font-size: 50px;
    padding-left: 5% ;
    padding-right: 5% ;
    font-weight: 550;
}

.filler-line2 {
    width: 25%;
    border: none; 
    border-top: 4px solid rgba(218, 41, 41, 0.451); 
    display: inline-block;
    margin-left: 8%;
} 

.additional-services-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 0px;
    margin-top: 0px;
}

.additional-services .service {
    flex: 0 1 25%;
    height: auto;
    margin: 1%;
    background-color: #f3f3f3;
    border: 1px solid #f3f3f3;
    border-top-right-radius: 50%;
    box-shadow: 0 8px 15px rgba(0,0,0,0.14);
    float: left;
}
.additional-services .service:nth-child(n+4) { 
    flex-basis: 25%; 
    margin-top: 5%; 
    float: left;
    margin-bottom: 25%;
}

.additional-services .service p {
    margin-top: 0px;
    margin-left: 15px;
    padding: 0;
    font-size: 30px;
    text-align: left;
}
.additional-services .service img {
    width: 55%;
    height: auto;
    margin-left: 15px;
    margin-top: 15px;
    float: left;
}
.receiptcontainer {
    max-width: 86%;
    margin: 0 auto;
    background-color: #fbe9e7;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}


.month-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-radius: 15px;
    margin: 22px;
    font-weight: bold;
    font-size: 42px;
}
.log {
    background-color: #fff;
    border-radius: 25px;
    padding: 15px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.log-left {
    display: flex;
    font-size: 30px;
    flex-direction: column;
}
.log-right {
    color: #ff6f61;
    font-size: 30px;
}
.log-date {
    font-size: 30px;
    color: #999;
}

.navbar {
    background-color: #f6f6f6;
    position: fixed;
    bottom: 0px;
    left: 0px ;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2% 15px;
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.2); 
    z-index: 10;
    max-width: 100%;
}

.navbar a {
    color: #555; /* grey text */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40px;
    margin: 0 10px;
}

.navbar a.active {
    color: red;
    font-weight: 550;
}

.navbar img {
    width: 88px;
    height: auto;
    margin-bottom: 0px;
}

.container-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 55px;
  }
  
  .left-column {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 30px;
  }

  
  .right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0px;
  }
  
  .icons1 {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
  }
  
  .icon1 {
    font-size: 75px;
    cursor: pointer;
  }
  
  .edit-icon {
    color: #000000; /* Edit icon color */
  }
  
  .delete-icon {
    color: #000000; /* Delete icon color */
  }
  

@keyframes slide-to-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes slide-to-left {
    100% {
        transform: translateX(0%);
    }
    0% {
        transform: translateX(22%);
    }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }